import React, {useState, useEffect} from 'react';
import {connect} from 'react-redux';
import {
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  Image,
  Button,
  Pressable,
  LogBox,
} from 'react-native';
import {setStore, getStore} from '../../utils/storage';
import {goodsRealPrice} from '../../api/index.js';

import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import TopHeader from '../../components/TopHeader';

const Financial = ({navigation, user}) => {
  const [btcInfo, setBtcInfo] = useState({});
  const getData = async function () {
    const res = await goodsRealPrice({
      symbol: 'BTC',
    });
    if (res.code === 1000) {
      setBtcInfo(res.data);
    }
  };

  useEffect(() => {
    async function getStores() {
      const storeToken = await getStore('token');
      const storeUserId = await getStore('user_id');
      console.log(storeToken, storeUserId);
    }
    getStores();
    getData();
    const timer = setInterval(() => {
      getData();
    }, 60 * 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <SafeAreaView>
      <View style={styles.container}>
        <View style={styles.nav}>
          <View style={styles.navItem}>
            <Text style={styles.navActive}>外匯商品</Text>
          </View>
          <View style={styles.navItem}>
            <Text style={styles.navNormal}>指數商品</Text>
          </View>
          <View style={styles.navItem}>
            <Text style={styles.navNormal}>大宗商品</Text>
          </View>
          <View style={styles.navItem}>
            <Text style={styles.navNormal}>加密貨幣</Text>
          </View>
        </View>
        <View style={styles.financeTitleContainer}>
          <View style={styles.financeTitleContainerItem}>
            <Text style={styles.financeTitleContainerItemText}>名稱</Text>
          </View>
          <View style={styles.financeTitleContainerItem}>
            <Text style={styles.financeTitleContainerItemText}>價格</Text>
          </View>
          <View style={styles.financeTitleContainerItem}>
            <Text style={styles.financeTitleContainerItemText}>漲跌</Text>
          </View>
          <View style={styles.financeTitleContainerItem}>
            <Text style={styles.financeTitleContainerItemText}>漲幅</Text>
          </View>
          <View style={styles.financeTitleContainerItem}>
            <Text style={styles.financeTitleContainerItemText}>走勢</Text>
          </View>
          <View style={styles.financeTitleContainerItem}>
            <Text style={styles.financeTitleContainerItemText}> </Text>
          </View>
        </View>
        <Pressable
          style={styles.financeRowContainer}
          onPress={() => navigation.navigate('BetScreen')}>
          <View style={styles.financeRowContainerItem}>
            <Text style={styles.financeRowContainerItemText}>
              <MaterialCommunityIcons
                name="currency-btc"
                color="#000"
                size={24}
              />
              Bitcoin
            </Text>
          </View>
          <View style={styles.financeRowContainerItem}>
            <Text style={styles.financeRowContainerItemText}>59,745,00</Text>
          </View>
          <View style={styles.financeRowContainerItem}>
            {btcInfo.priceChange > 0 ? (
              <Text style={styles.financeRowContainerItemText2}>
                {btcInfo.priceChange}
              </Text>
            ) : (
              <Text style={styles.financeRowContainerItemText3}>
                {btcInfo.priceChange}
              </Text>
            )}
          </View>
          <View style={styles.financeRowContainerItem}>
            {btcInfo.priceChangePercent > 0 ? (
              <Text style={styles.financeRowContainerItemText2}>
                ▼({btcInfo.priceChangePercent}%)
              </Text>
            ) : (
              <Text style={styles.financeRowContainerItemText3}>
                ▼({btcInfo.priceChangePercent}%)
              </Text>
            )}
          </View>
          <View style={styles.financeRowContainerItem}>
            <Text style={styles.financeRowContainerItemText}>走勢</Text>
          </View>
          <View style={styles.financeRowContainerItem}>
            <MaterialCommunityIcons
              name="chevron-right"
              color="#000"
              size={20}
            />
          </View>
        </Pressable>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
  },
  nav: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-around',
    flexDirection: 'row',
    marginTop: 4,
    height: 30,
  },
  navItem: {
    width: '25%',
    paddingLeft: 10,
    paddingRight: 10,
  },
  navActive: {
    color: '#169BD5',
    fontSize: 14,
    fontWeight: 'bold',
  },
  navNormal: {
    color: '#999999',
    fontSize: 14,
    fontWeight: 'bold',
  },
  financeTitleContainer: {
    display: 'flex',
    flexDirection: 'row',
    backgroundColor: '#F2F2F2',
    height: 30,
    marginTop: 4,
    borderBottomColor: '#797979',
    borderBottomWidth: 1,
  },
  financeTitleContainerItem: {
    paddingLeft: 5,
    paddingRight: 5,
    flexGrow: 1,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
  },
  financeTitleContainerItemText: {
    color: '#666',
    fontSize: 16,
    fontWeight: 'bold',
  },
  financeRowContainer: {
    display: 'flex',
    flexDirection: 'row',
    height: 56,
    borderBottomColor: '#797979',
    borderBottomWidth: 1,
    borderRightColor: '#797979',
    borderRightWidth: 1,
    borderLeftColor: '#797979',
    borderLeftWidth: 1,
  },
  financeRowContainerItem: {
    paddingLeft: 5,
    paddingRight: 5,
    flexGrow: 1,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
  },
  financeRowContainerItemText: {
    color: '#666',
    fontSize: 16,
    fontWeight: 'bold',
  },
  financeRowContainerItemText2: {
    color: '#009900',
    fontSize: 16,
    fontWeight: 'bold',
  },
  financeRowContainerItemText3: {
    color: '#FF0052',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

// 3. select函数
function select(state) {
  console.log(state);
  // state
  return {
    user: state.user,
  };
}

export default connect(select)(Financial);
